<template>
  <div>
    <span v-if="inp == 0" @click="changgeinp(1)">{{ tx }}</span>
    <span v-else-if="inp == 2" @click="changgeinp(1)">{{ tx }}</span>
    <input
      v-fcus
      class="ip"
      v-else
      type="text"
      name=""
      id=""
      @blur="yu"
      @keydown.enter="yu"
      v-model="tx"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inp: 0,
      tx: "hh",
    };
  },
  props: ["w"],
  mounted() {
    if (!this.w) {
      this.tx = "空";
    }
    this.tx = this.w;
    if (!this.tx) {
      this.inp = 1;
    }
   
  },
  methods: {
    changgeinp(k) {
      this.inp = k;
    },
    yu() {
      if (this.tx) {
        this.inp = 0;
      } else {
        this.tx = "空";
        this.inp = 2;
      }
    },
  },
  directives: {
    fcus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style  scoped>
span {
  text-align: center;
  line-height: 42px;
  overflow: hidden;
  white-space:nowrap;
}
.ip {
  margin-top: 8%;
  margin-bottom: 9.2%;
  width: 90%;
  height: 100%;
  overflow: hidden;
  white-space:nowrap;
}
</style>